<template>
  <div>
    <Header :isGoBack="false">
      <!-- <template v-slot:left>
          <span>单词速记王 <i class="el-icon-arrow-right"></i> 阅读理解</span>
        </template> -->
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center read-center w1200">
      <div class="study-conatiner mt30 flex-space-be">
        <div class="intelligent-study study-item mr20" id="step4">
          <div class="intelligent-study-header study-item-header">
            <span>第三阶段：个性化阅读理解</span>
          </div>
          <!-- <div
              class="intelligent-study-container read-study-none"
            >
              该课程暂无阅读题
            </div> -->
          <div class="intelligent-study-container flex-space-be">
            <div class="
                  intelligent-study-right
                  study-cotainer
                  intelligent-study-item
                ">
              <div class="intelligent-right-conatin">
                <div class="word-study">
                  <div class="word-study-item">
                    <!-- :class="[
                          testDataInfo.intelligent_mode.progress >=
                          testDataInfo.intelligent_mode.total_progress
                            ? 'study-border'
                            : '',
                        ]" -->
                    <div class="study-item big-study-item mr30" @click="goIntelligentTrain">
                      <div class="study-item-progress">
                        <div v-if="categoryMode.intelligent_mode.finish_progress >=
                          categoryMode.intelligent_mode.total_progress
                          " class="challenge challenge-right" :style="'width: 120px; height: 120px'">
                          <img src="../../../assets/img/right-b.png" alt="" />
                        </div>
                        <el-progress v-if="categoryMode.intelligent_mode.finish_progress <
                          categoryMode.intelligent_mode.total_progress
                          " :width="120" :height="120" type="circle" :percentage="Math.min(
    parseInt(
      (categoryMode.intelligent_mode.finish_progress /
        categoryMode.intelligent_mode
          .total_progress) *
      100
    ),
    100
  )
    " :color="$store.getters.color_main" class="red-text green-text"
                          :format="formatProgress(categoryMode)"></el-progress>
                      </div>
                      <div class="study-item-name">智能训练</div>
                      <p class="study-item-notice" v-if="categoryMode.intelligent_mode.finish_progress
                        ">
                        正确率：
                        <span>{{correct_percent}}%
                        </span>
                      </p>
                      <p v-else class="study-item-notice red-color">
                        正确率：
                        <span>未测</span>
                      </p>
                    </div>
                    <div class="study-item big-study-item" :class="[
                          categoryMode.level_mode.correct_rate >= 85
                            ? 'study-border'
                            : '',
                          $store.getters.isTeacher ? 'not-click' : 'click',
                        ]" @click="goProficiencyTest">
                      <div class="study-item-progress">
                        <el-progress :width="120" :height="120" type="circle" :percentage="categoryMode.level_mode.score"
                          :color="$store.getters.color_main" class="red-text green-text"
                          :format="formatProgress(categoryMode, 2)"></el-progress>
                      </div>
                      <div class="study-item-name">水平测试</div>
                      <p
                        class="study-item-notice"
                        v-if="
                         categoryMode.level_mode.score || categoryMode.level_mode.score==0
                        "
                      >
                        正确率：
                        <span
                          >{{ level_correct_percent }}%
                        </span>
                      </p>
                      <p v-else class="study-item-notice red-color">
                        正确率：
                        <span>未测</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header";
import { getReadCenterData } from "@/api/index";
import { getIndividualArticleQuestion, getIndividualTestQuestion } from "@/api/individuationRead.js"
const nameList=["correct_num","finish_progress","mistake_num","progress","total_progress"]
export default {
  data() {
    return {
      categoryMode: {
        intelligent_mode: {},
        level_mode: {}
      },
      checkedBookData: {},
      questionType: null,
      checkedType: null,
      readTypeObj: {},
      questionTypeObj: {},
      readCenterData2: {
        mode_list: [],
      },
      readCenterData5: {
        mode_list: [],
      },
      isCategory: false,
    };
  },
  computed: {
    groupId() {
      return this.$route.query.groupId
    },
    correct_percent(){
      let num =parseInt(this.categoryMode.intelligent_mode.correct_num / (this.categoryMode.intelligent_mode.correct_num + this.categoryMode.intelligent_mode.mistake_num)*100)
      if(num){
        return num
      }else{
        return 0
      }
    },
    level_correct_percent(){
      let num =parseInt(this.categoryMode.level_mode.correct_num / (this.categoryMode.level_mode.correct_num + this.categoryMode.level_mode.mistake_num)*100)
      if(num){
        return num
      }else{
        return 0
      }
    },
  },
  methods: {
    async getIndividualArticleQuestion() {
      let { data } = await getIndividualArticleQuestion(this.groupId)
      let totalData={
        correct_num:0,
        finish_progress:0,
        mistake_num:0,
        progress:0,
        total_progress:0
      }
      data.category_mode_list.forEach(item=>{
        nameList.forEach(name=>{
          totalData[name]+=item.intelligent_mode[name]
        })
      })
      // const { intelligent_mode } = data.category_mode_list[0]
      this.categoryMode.intelligent_mode = totalData
    },
    async getIndividualTestQuestion() {
      let { data } = await getIndividualTestQuestion(this.groupId)
      const { intelligent_mode } = data.category_mode_list[0]
      this.categoryMode.level_mode = intelligent_mode
      console.log(this.categoryMode, "res22");
    },
    goReadTestList() {
      this.$router.push({
        name: "readTestList",
      });
    },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    goIntelligentTrain() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "intelligentTrain",
        query: {
          questionType: 2,
          checkedType: this.groupId,
          isCategory: 0,
          individuationReadCenter: true
        },
      });
    },
    goProficiencyTest() {
      if (this.$store.getters.isTeacher) {
        return;
      }
      this.$router.push({
        name: "proficiencyTest",
        query: {
          questionType: 5,
          checkedType: this.groupId,
          isCategory: 0,
          individuationReadCenter: true
        },
      });
    },
    formatProgress(data, type) {
      return function () {
        if (type == 2) {
          if (
            data &&
            (data.level_mode.score || data.level_mode.score == 0)
          ) {
            return `${data.level_mode.score}分`;
          } else {
            return "未测";
          }
        } else {
          if (data) {
            return `${data.intelligent_mode.finish_progress}/${data.intelligent_mode.total_progress}`;
          } else {
            return "";
          }
        }
      };
    },
  },
  created() {
    this.getIndividualArticleQuestion()
    this.getIndividualTestQuestion()
  },
  beforeDestroy() { },
  mounted() {
  },
  components: { Header },
  watch: {
  },
};
</script>
<style lang="scss" scoped>
.study-item-progress /deep/ .el-progress-circle {
  width: 0.4166666666666667rem !important;
  height: 0.4166666666666667rem !important;
}
.study-item-progress /deep/ .el-progress__text {
  font-size: 0.07986109375rem !important;
}
</style>